<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>环境</title>
    <!--element三个导入-->
    <script src="../plugins/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../show//css/login.css" />
    <!--axios-->
    <script src="../plugins/axios-0.18.0.js"></script>
</head>
<body>
<div id="back">
<div id="login">
    <el-form ref="loginForm" :rules="rules" :model="form" label-width="80px" id="EnvironmentLogin">
        <div id="loginMsg">LOGIN IN</div>
        <el-form-item label="用户名" id="username" prop="username">
            <el-input type="text" auto-complete="off" placeholder="请输入账号" v-model="form.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" id="password" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password" clearable  show-password></el-input>
        </el-form-item>
        <div id="butt">
            <el-button type="primary" @click.native.prevent="onSubmit('loginForm')">
                <span >登录</span>
            </el-button>
            <el-button class="shou" @click="register">注册</el-button>
        </div>
    </el-form>
</div>
</div>
</body>
<script>
    new Vue({
        el:"#login",
        props: {
            msg: String
        },
        data(){
            return {
                form: {
                    username: '',
                    password: ''
                },
                loading: true,
                checked:false
            }
        },
        computed: {
            rules() {
                const validateUsername = (rule, value, callback) => {
                    if (value.length < 1 ) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                };
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 6) {
                        callback(new Error('密码必须在6位以上'))
                    } else {
                        callback()
                    }
                };
                return {
                    'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                    'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
                }
            }
        },
        methods: {
            onSubmit(form) {
                // 为表单绑定验证功能
                this.$refs[form].validate((valid) => {
                    this.logining = true,
                        setTimeout(() => {
                            this.dialogVisible = true
                            //关闭加载按钮
                            this.logining = false
                        }, 2000)
                    if (valid) {
                        var username = this.form.username;
                        var password = this.form.password;
                        let postData = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
                        var instance = axios.create({
                            headers:
                                {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}
                        });
                        var _this = this
                        //发生ajax请求
                        axios.post('/user/login', this.form,this.checked)
                            .then(function (response) {
                                console.log(response)
                                console.log(_this.form.username)
                                console.log(response.data.data.username)
                                if (_this.form.username==response.data.data.username) {
                                    location.href = "video-learning.html";
                                    //存到本地存储
                                    localStorage.setItem("username", that.form.username);
                                } else {
                                    alert("你输入的账户或密码错误,请重新输入")
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            register() {
                window.location.href = '/show/page/register.html';
            }
        }
    })
</script>
</html>